{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px;}
	.el-upload-list{width: 30%;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="平台" prop="platform">
    <el-checkbox-group v-model="form.platform">
      <el-checkbox :label="'android'">Android</el-checkbox>
      <el-checkbox :label="'ios'">iOS</el-checkbox>
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="类型" prop="wgt">
    <el-radio-group v-model="form.wgt">
      <el-radio :label="1">资源包</el-radio>
      <el-radio :label="0">安装包[默认]</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="版本号" prop="version_code">
    <el-input type="number" v-model="form.version_code" class="col-12 col-sm-2 pl-0 pr-0" placeholder="versionCode"></el-input>
	<div class="small text-secondary">Android可上传APK到服务器自动获取版本号,iOS与资源包需要手动输入</div>
  </el-form-item>

  <el-form-item label="版本名称" prop="version_name">
    <el-input v-model="form.version_name" class="col-12 col-sm-2 pl-0 pr-0" placeholder="versionName"></el-input>
	<div class="small text-secondary">Android可上传APK到服务器自动获取版本名称,iOS与资源包需要手动输入</div>
  </el-form-item>

  <el-form-item label="资源包" prop="path" v-if="form.wgt">
  	  <el-upload
		  action="/uploadFiles"
		  name="file"
		  ref="upload"
		  :data="{path:'file/wgt'}"
		  show-file-list
		  :on-success="handleFilesSuccess"
		  :on-error="handleFilesError"
		  :on-remove="handleFilesRemove"
		  :auto-upload="false"
		  :before-upload="beforeWgtUpload">
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传到服务器</el-button>
	  </el-upload>
  </el-form-item>

  <el-form-item label="APK" prop="path" v-if="form.platform.indexOf('android')>-1&&!form.wgt">
  	  <el-upload
		  action="/uploadFiles"
		  name="file"
		  ref="upload"
		  accept="application/vnd.android.package-archive"
		  :data="{path:'file/apk'}"
		  show-file-list
		  :on-success="handleFilesSuccess"
		  :on-error="handleFilesError"
		  :on-remove="handleFilesRemove"
		  :auto-upload="false"
		  :before-upload="beforeApkUpload">
			  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
			  <el-button size="small" class="mr-3" type="success" @click="submitUpload">上传到服务器</el-button>
	  </el-upload>
  </el-form-item>

  <el-form-item label="AppStore链接" prop="ios_url" v-if="form.platform.indexOf('ios')>-1&&!form.wgt">
    <el-input v-model="form.ios_url" class="col-12 col-sm-4 pl-0 pr-0" placeholder="URL"></el-input>
	<div class="small text-secondary">示例：https://apps.apple.com/cn/app/应用名称/id应用ID?mt=8</div>
	<div class="small text-secondary">请替换“应用名称”和“应用ID”</div>
  </el-form-item>

  <el-form-item label="更新" prop="status">
    <el-radio-group v-model="form.status">
      <el-radio :label="1">开启[默认]</el-radio>
      <el-radio :label="0">关闭</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="强制更新" prop="force">
    <el-radio-group v-model="form.force">
      <el-radio :label="1">是</el-radio>
      <el-radio :label="0">否[默认]</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="更新说明" prop="desc">
    <el-input type="textarea" v-model="form.desc" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Desc" :autosize="{ minRows: 6, maxRows: 20}" maxlength="200"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			filesInfo:{
				fid:0
			},
			form:{
				platform:[],
				version_code:'',
				version_name:'',
				path:'',
				ios_url:'',
				desc:'',
				status:1,
				wgt:0,
				force:0
			},
	        rules: {
		      platform: [
		        { required: true, message: '请勾选要更新的平台', trigger: 'change' }
		      ],
		      version_code: [
		        { required: true, message: '版本号不能为空', trigger: 'blur' }
		      ],
		      version_name: [
		        { required: true, message: '版本名称不能为空', trigger: 'blur' }
		      ],
		      path: [
		        { required: true, message: '请上传APK到服务器', trigger: 'blur' }
		      ],
		      ios_url: [
		        { required: true, message: '请输入AppStore链接', trigger: 'blur' }
		      ],
		      desc: [
		        { required: true, message: '请输入更新说明', trigger: 'blur' }
		      ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    submitUpload() {
		        this.$refs.upload.submit();
		    },
			handleFilesSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'file/apk'){
							this.filesInfo=res.data;
							this.form.version_code=res.data.version_code;
							this.form.version_name=res.data.version_name;
							this.form.path=res.data.path;
						}else if(res.data.type == 'file/wgt'){
							this.filesInfo=res.data;
							this.form.path=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleFilesError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
	      	beforeApkUpload:function(file) {
				const isAPK = file.type === 'application/vnd.android.package-archive';
				if (!isAPK)
					XYBase.error('只能是APK安装包');
				return isAPK;
	      	},
	      	beforeWgtUpload:function(file) {
	      		console.log(file);
	      		console.log(file.type);
				const isWgt = file.type === 'application/vnd.android.package-archive';
				if (!isWgt)
					XYBase.error('只能是APK安装包');
				return isWgt;
	      	},
		    handleFilesRemove(){
		    	var _this=this;
		    	const loading=XYBase.openloading();
		    	if (_this.filesInfo.fid) {
		    		$.getJSON('/files/uploads',{id:_this.filesInfo.fid},function(ret){
		    			loading.close();
		    			if(ret){
		    				if(ret.code == 0){
								_this.filesInfo.fid=0;
		    					return true;
		    				}else{
		    					XYBase.msg(ret.msg);
		    					return false;
		    				}
		    			}else{
		    				XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		    		return false;
		    	}else{
		    		loading.close();
		    		return true;
		    	}
		    },
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									window.location.href='/client/app/version';
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.pid=pid;
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}